import React, { useState, useEffect } from 'react';
import { history } from 'umi'
import { Tabs, Spin, Empty, List } from 'antd';
import moment from 'moment';
import { eventTrack } from '@/utils/track';
import LinkTo from '@/components/LinkTo';
import { getPass, getRead } from '@/services/notice/homePage';
import authHelpr from '@/utils/auth/helper';
import { MoreBar } from '../common/TabBarExtraContent';
import styles from '../../homepage.less';

const { TabPane } = Tabs;
const { checkCode } = authHelpr;

/**
 * 我的流程 [DELETE feature-t1-1.8.3-privilege]
 */
const Wdlc = props => {
    const { responders } = props;
    const { droppableProps, onAdd } = responders;

    const [spinning, setSpinning] = useState(false);
    const [passData, setPassData] = useState([]);
    const [readData, setReadData] = useState([]);
    // const [passTotal, setPassTotal] = useState(0);
    const [readTotal, setReadTotal] = useState(0);
    const tabs = [
        {
            // name: `经我审批 (${passTotal})`,
            name: '经我审批',
            code: 'portal:myflow:passmelist',
            component: item => (
                <List.Item key={item.companyId}>
                    <List.Item.Meta
                        className={styles.workListMeta}
                        title={
                            <LinkTo
                                onClick={(e, url) => {
                                    eventTrack({
                                        eventName: 'portal_flow_my_audited_info_click',
                                        pageName: 'personal_portal',
                                        eventProps: {
                                            click_context: item.applicationName
                                        }
                                    });
                                    history.push(url);
                                }}
                                to="/personal/portal/flow/mine/approvalDetail"
                                query={{
                                    applicationNo: item.applicationNo
                                }}
                            >
                                {item.applicationName}
                            </LinkTo>
                        }
                    />
                    <div className={styles.wnlist_time}>
                        {droppableProps['data-rbd-droppable-id'] === 'droppable'
                            ? moment(item.startingTime).format('YYYY-MM-DD HH:mm')
                            : moment(item.startingTime).format('YYYY-MM-DD')}
                    </div>
                </List.Item>
            ),
            path: '/personal/portal/flow/mine/myAudited',
            dataSource: passData
        },
        {
            name: `待我阅读 (${readTotal})`,
            code: 'portal:myflow:readinglist',
            component: item => (
                <List.Item key={item.id}>
                    <List.Item.Meta
                        className={styles.workListMeta}
                        title={
                            <LinkTo
                                onClick={(e, url) => {
                                    eventTrack({
                                        eventName: 'portal_flow_my_audit_read_info_click',
                                        pageName: 'personal_portal',
                                        eventProps: {
                                            click_context: item.applicationName
                                        }
                                    });
                                    history.push(url);
                                }}
                                to="/personal/portal/flow/mine/approvalDetail"
                                query={{
                                    applicationNo: item.applicationNo
                                }}
                            >
                                {item.applicationName}
                            </LinkTo>
                        }
                    />
                    <div className={styles.wnlist_time}>
                        {droppableProps['data-rbd-droppable-id'] === 'droppable'
                            ? moment(item.startingTime).format('YYYY-MM-DD HH:mm')
                            : moment(item.startingTime).format('YYYY-MM-DD')}
                    </div>
                </List.Item>
            ),
            path: '/personal/portal/flow/mine/myAuditRead',
            dataSource: readData
        }
    ];
    const hasAuth = tabs.filter(item => checkCode(item.code));

    const moreEventHandler = (e, url) => {
        eventTrack({
            eventName: 'portal_flow_more_click',
            pageName: 'personal_portal'
        });
        history.push(url);
    };

    const [linkProps, setLinkProps] = useState({
        to: hasAuth.length > 0 ? hasAuth[0].path : '',
        query: {},
        onClick: moreEventHandler
    });

    /* 是否全部没有权限 */
    const isAllNone = hasAuth.length === 0;
    // 切换面板-改变更多的跳转路径
    const activeTab = code => {
        const find = tabs.find(item => item.code === code) || {};
        setLinkProps({
            to: find.path,
            query: {},
            onClick: moreEventHandler
        });
    };
    const init = async () => {
        if (isAllNone) {
            return;
        }
        setSpinning(true);
        const [read, pass] = await Promise.all([
            getRead({ pageNo: 1, pageSize: 4, readStatus: 0 }),
            getPass({ pageNo: 1, pageSize: 4 })
        ]);
        setSpinning(false);
        if (read && read.code === 10000) {
            setReadData(read.data.rows);
            setReadTotal(read.data.total);
        }
        if (pass && pass.code === 10000) {
            setPassData(pass.data.rows);
            // setPassTotal(pass.data.total);
        }
    };
    useEffect(() => {
        init();
    }, []);
    return (
        <Spin spinning={spinning}>
            {isAllNone ? (
                <div>
                    <div className={styles.wnNoticeTitle}>
                        <h4>我的流程</h4>
                    </div>
                    <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                </div>
            ) : (
                <Tabs
                    className={styles.wnWdlcTitle}
                    onChange={activeTab}
                    onTabClick={code => {
                        let eventName = null;
                        switch (code) {
                            case 'portal:myflow:approvelist':
                                eventName = 'portal_flow_wait_approval_click';
                                break;
                            case 'portal:myflow:passmelist':
                                eventName = 'portal_flow_my_audited_click';
                                break;
                            case 'portal:myflow:readinglist':
                                eventName = 'portal_flow_my_audit_read_click';
                                break;
                            default:
                                break;
                        }
                        eventTrack({
                            eventName,
                            pageName: 'personal_portal'
                        });
                    }}
                    defaultActiveKey="approve"
                    tabBarExtraContent={
                        <MoreBar
                            linkProps={linkProps}
                            onAdd={onAdd}
                            isDelete={false}
                            onClick={(e, url) => {
                                eventTrack({
                                    eventName: 'portal_flow_more_click',
                                    pageName: 'personal_portal'
                                });
                                history.push(url);
                            }}
                        />
                    }
                >
                    {hasAuth.map(item => (
                        <TabPane tab={item.name} key={item.code}>
                            <List
                                className={styles.wnlist}
                                itemLayout="horizontal"
                                split={false}
                                dataSource={item.dataSource.filter((newItem, index) => index < 4)}
                                renderItem={item.component}
                            />
                        </TabPane>
                    ))}
                </Tabs>
            )}
        </Spin>
    );
};
export default Wdlc;
